<template>
	<view class="goods_detail">
		<!-- 轮播图 -->
		<swiper indicator-dots="true">
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.src1"></image>
			</swiper-item>			
			<swiper-item v-for="item in swipers" :key="item.id+1">
				<image :src="item.src2"></image>
			</swiper-item>
		</swiper>
		<!-- 展示内容 -->
		<view class="box1">
			<view class="price">
				<text>￥{{info.sellPrice}}</text>
				<text>￥{{info.marketPrice}}</text>
			</view>
			<view class="goods_name">{{info.title}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view>货号:{{info.goodNo}}</view>
			<view>库存:{{info.stockQuantity}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view class="title">详情介绍</view>
			<view class="content">
				<rich-text :nodes="content">
				</rich-text>
			</view>
		</view>
		<view class=".goods-settle">
		<view class="goods_nav">
		<view class="order" @click="onClick">收藏</view>
		<view class="buy" @click="orderClick">立即购买</view>
		</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				uid:0,
				imgUrl:'',
				id: 0,
				swipers: [],
				info: {},
				content: '',
			}
		},
		methods: {
			async getSwipers () {
				const res = await this.$myRequest({
					url: '/imagesplus/%7Bid%7D?limit=3&page=1&sort=1&id='+this.id
				})
				this.swipers = res.data.data.items
			},
			async getDetailInfo() {
				const res= await this.$myRequest({
					url: '/info/%7Bid%7D?limit=1&page=1&sort=1&id='+this.id
				})
				this.info = res.data.data.items[0]
			},
			async getDetailContent () {
				const res = await this.$myRequest({
					url: '/desc1/%7Bid%7D?limit=1&page=1&sort=1&id='+this.id
				})
				this.content = res.data.data.items[0].content
			},			
			async onClick () {
				const res = await this.$myRequest({
							url: '/insertCar?title='+this.info.title+'&img_url='+"https://img2.doubanio.com/view/subject/l/public/s7663093.jpg"+'&sell_price='+this.info.sellPrice+'&market_price='+this.info.marketPrice+'&uid='+this.uid
							})
							uni.showToast({
								title:'添加成功，在收藏夹等你~'
							})		
			      },
				  async getGoodsList(callBack) {
				  	const res = await this.$myRequest({
				  		url: '/goods?limit=10&sort=1&page='+1	
				  	})
				  	console.log(res)
					this.imgUrl=res.data.data.items[0].imgUrl
					console.log(this.imgUrl)
					callBack && callBack()
					},
				  async getUserInfo(){
				  	const res = await this.$myRequest({
				  				url: '/user/getUserInfo'
				  				})
				  				this.uid=res.data[1]					
				  },
				  async orderClick () {	
					uni.navigateTo({
						url:'../order/orderIndex?title='+this.info.title+'&sell_price='+this.info.sellPrice
					})			
				        },
		},
		
		onLoad (options) {
			console.log(options)
			this.id = options.id
			console.log(this.id)
			this.getSwipers()
			this.getDetailInfo()
			this.getDetailContent()
			this.getUserInfo()
			this.getGoodsList()
		}
		
	}
</script>

<style lang="scss"> 
.goods_detail {
	swiper {
		height: 700rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.box1 {
		padding: 10px;
		.price {
			font-size: 35rpx;
			color: $shop-color;
			line-height: 80rpx;
			text:nth-child(2) {
				color: #ccc;
				font-size: 28rpx;
				text-decoration: line-through;
				margin-left: 20rpx;
			}
		}
		.goods_name {
			font-size: 32rpx;
			line-height: 60rpx;
		}
	}
	.box2 {
		padding: 0 10px;
		font-size: 32rpx;
		line-height: 70rpx;
	}
	.box3 {
		padding: 50px;
		.title{
			font-size: 32rpx;
			padding: 10px;
			border-bottom: 1px solid #eee;
			line-height: 70rpx;
		}
		.content {
			padding: 10px;
			font-size: 28rpx;
			color: #333;
			line-height: 50rpx;
		}
	}
}
.line {
	height: 10rpx;
	width: 750rpx;
	background: #eee;
}

.gomeImgLoad {
	width: 750rpx;
	height: auto;
}
.goods_nav {
	background-color: #F8F8F8;
	display: flex;
	float: right;
	position: relative;
	position: fixed;
	bottom: 0;
	width: 100%;
}
.order{
	font-size: 32upx;
	width: 180upx;
	background-color:  #f06c7a;
	border-radius: 30upx;
	height: 66upx;
	text-align: center;
	line-height: 66upx;
	margin-left: 380upx;
}
.buy{
	font-size: 32upx;
	width: 180upx;
	background-color:  #f06c7a;
	border-radius: 30upx;
	height: 66upx;
	text-align: center;
	line-height: 66upx;
	margin-left: 10upx;
}

</style>
